<!doctype html>
<html lang="en">
    <head>
        <script src="../../scripts/gentest/test_helper.js"></script>
        <link
            rel="stylesheet"
            type="text/css"
            href="../../scripts/gentest/test_base_style.css"
        />
        <title>Test description</title>
    </head>
    <body>
        <div id="test-root">
            <div
                style="display: block; width: 200px; height: 200px; border: 20px solid; padding: 15px; position: relative;"
            >
                <div style="position: absolute; top: auto; left: auto;"></div>
                <div style="position: absolute; top: 0; left: 0;"></div>
                <div style="position: absolute; top: 100%; left: 100%;"></div>
                <div
                    style="position: absolute; bottom: 100%; right: 100%;"
                ></div>
                <div style="position: absolute; top: 30px; left: 30px;"></div>
                <div
                    style="position: absolute; top: 0; left: 0; width: 100%; height: 100%;"
                ></div>
            </div>

            <div
                style="display: block; width: 200px; height: 200px; border: 20px solid; padding: 15px; overflow: scroll; position: relative;"
            >
                <div style="position: absolute; top: auto; left: auto;"></div>
                <div style="position: absolute; top: 0; left: 0;"></div>
                <div style="position: absolute; top: 100%; left: 100%;"></div>
                <div
                    style="position: absolute; bottom: 100%; right: 100%;"
                ></div>
                <div style="position: absolute; top: 30px; left: 30px;"></div>
                <div
                    style="position: absolute; top: 0; left: 0; width: 100%; height: 100%;"
                ></div>
            </div>
            <!-- Checks if "top: auto" resolves to the static y position -->
            <div
                style="display: block; width: 200px; height: 200px; border: 20px solid; padding: 15px; position: relative;"
            >
                <div style="display: block; height: 10px; width: 50px;"></div>
                <div style="position: absolute; top: auto; left: auto;"></div>
            </div>
        </div>
    </body>
</html>
